<template>
  <div>
    <div v-if="activities">
      <div v-for="(act, index) in activities" :key="index">
        <ActivityItem class="pa-3" :act="act"></ActivityItem>
        <v-divider
          v-if="index != Object.keys(activities).length - 1"
          class="grey lighten-2"
        ></v-divider>
      </div>
    </div>
  </div>
</template>

<script>
import ActivityItem from "../components/ActivityItem.vue";
import axios from "axios";

export default {
  name: "Home",
  components: {
    ActivityItem,
  },
  data() {
    return {
      activities: null,
    };
  },
  methods: {
    // 加载活动列表
    async getActivities() {
      await axios.get("/activities").then((res) => {
        this.activities = res.data.activities;
      });
    },
  },
  watch: {
    $route() {
      this.getActivities();
    },
  },
  // 加载活动列表
  mounted() {
    this.getActivities();
  },
};
</script>